<template>
  <div>
      <div id="a" style="float:left">
      <el-image
      style="width: 100px; height: 100px;cursor:pointer"
      @click="updated"
      :src="url"
      >
      </el-image>
      <div id="c"><i style="margin-top:30px;color: white;cursor:pointe;" class="el-icon-camera" @click="updated" ></i><br><strong style="color: white;cursor:pointe;" @click="updated">修改头像</strong></div>
      </div>
      <div style="float:left">
      <el-form v-model="form" style="text-align:left;margin-top:20px;width: 1000px;float: right;margin-right: 150px;" ref="dataForm">
        <el-row>
        <el-col :span="12">
        <el-form-item label="昵称" :label-width="formLabelWidth" prop="nickname">
          <el-input v-model="form.nickname" autocomplete="off" placeholder="" :disabled="abled"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="真实姓名" :label-width="formLabelWidth" prop="realname" >
          <el-input v-model="form.realname" autocomplete="off" :disabled="abled"></el-input>
        </el-form-item>
        </el-col>
        </el-row>
        <el-row>
        <el-col :span="12">
        <el-form-item label="QQ" :label-width="formLabelWidth" prop="qq" >
          <el-input v-model="form.qq" autocomplete="off" :disabled="abled"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="微信" :label-width="formLabelWidth" prop="wechat" >
          <el-input v-model="form.wechat" autocomplete="off" :disabled="abled"></el-input>
        </el-form-item>
        </el-col>
        </el-row>

        <el-row>
        <el-col :span="12">
        <el-form-item label="电话" :label-width="formLabelWidth" prop="phone" >
          <el-input v-model="form.phone" autocomplete="off" placeholder="" :disabled="abled"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email" >
          <el-input  v-model="form.email" autocomplete="off" disabled ></el-input>
        </el-form-item>
        </el-col>
        </el-row>
        <el-form-item label="工作" :label-width="formLabelWidth" prop="work">
          <el-input  v-model="form.work" autocomplete="off" :disabled="abled"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth" prop="address">
          <el-input  v-model="form.address" autocomplete="off" :disabled="abled"></el-input>
        </el-form-item>
        <el-form-item label="自我介绍" :label-width="formLabelWidth" prop="intro">
          <el-input type="textarea" v-model="form.intro" autocomplete="off" :disabled="abled"></el-input>
        </el-form-item>

        <el-row>
        <el-col :span="11">
        <el-form-item label="主功方向" :label-width="formLabelWidth" prop="hobby">

          <el-select v-model="form.hobby" placeholder="请选择分类" :disabled="abled">
            <el-option label="java" value="java"></el-option>
            <el-option label="python" value="python"></el-option>
            <el-option label="前端" value="前端"></el-option>
            <el-option label="GoLang" value="GoLang"></el-option>
            <el-option label="c++" value="c++"></el-option>
            <el-option label="区块链" value="区块链"></el-option>
          </el-select>

        </el-form-item>


        <el-form-item prop="uid" style="height: 0">
          <el-input type="hidden" v-model="form.uid" autocomplete="off"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="8">
        <el-button type="primary" @click="onSubmit" v-if="play1">修 改 资 料</el-button>
        <el-button type="primary" @click="submit" v-if="play">提交</el-button>
        </el-col>
        </el-row>

      </el-form>
    </div>
    <el-dialog
      title="修改头像"
      :visible.sync="dialogFormVisible"
      >
      <img-upload @onUpload="uploadImg" ref="imgUpload"></img-upload>
    </el-dialog>

  </div>
</template>

<script>
import ImgUpload from "./ImgUpload";
 export default {
   name: 'UserInfo',
   data () {
     return {
       play1:true,
       play: false,
       abled: true,
       dialogFormVisible: false,
       url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
       form: {
        uid: "",
        nickname: "",
        realname: "",
        qq: "",
        wechat: "",
        phone: "",
        email: "",
        work: "",
        address:"",
        intro:"",
        hobby:"",
      },
      formLabelWidth: "70px"
     }
   },
   props: [],
   components: {
     ImgUpload
   },
   created () {},
   mounted () {this.loadUserInfo()},
   methods: {
      onSubmit() {
        this.abled = false;
        this.play = !this.play,
        this.play1 = !this.play1
      },
      updated(){
        this.dialogFormVisible = true
        // this.$refs.imgUpload.$refs.upload.submit();
        // this.$refs.imgUpload.upLoadFile();

      },
      uploadImg() {
      this.url = this.$refs.imgUpload.url,
      this.dialogFormVisible = false
      var _this = this
      this.$axios.post('/user/updateAvatar', {
        avatar: _this.url
      })
      .then(function (response) {
      })
      .catch(function (error) {
      })
      },
      loadUserInfo(){
        var  _this = this;
        this.$axios.post('/user/userInfo')
        .then(resp=>{
          if(resp.data.code === 200){
          _this.url = resp.data.data.avatar
          _this.form = resp.data.data
          }
        })
        .catch(function (error) {
        })
      },
      submit() {
        this.abled = true;
        this.play = !this.play;
        this.play1 = !this.play1;
        var _this = this;
        this.axios.post('/user/updateUserInfo', {
        uid: this.form.uid,
        nickname: this.form.nickname,
        realname: this.form.realname,
        qq: this.form.qq,
        wechat: this.form.wechat,
        phone: this.form.phone,
        email: this.form.email,
        work: this.form.work,
        address:this.form.address,
        intro:this.form.intro,
        hobby:this.form.hobby,
        })
        .then(function (response) {
        })
        .catch(function (error) {
        })
      },
   }
 }
</script>

<style lang="css" scoped>
#a{
    width: 100px;
    height: 100px;
}

#c {
    width:100%;
    height:100%;
    background-color:rgb(56, 53, 53);
    position:relative;
    left:0px;
    top:-106px;
    z-index:0;
    opacity:0.3;
    filter: alpha(opacity=30);
    display:block;
    cursor: pointer;
    }
</style>
